<template>
    <div>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item><el-input clearable v-model="searchForm.name" style="width: 300px" placeholder="项目名称"></el-input></el-form-item>
            <el-form-item>
                <el-select clearable v-model="searchForm.state" style="width: 300px" placeholder="审批状态">
                    <!-- <el-option label="请选择..." value=""></el-option> -->
                    <el-option label="未发布" value="0"></el-option>
                    <el-option label="申报中" value="1"></el-option>
                    <el-option label="待评分" value="2"></el-option>
                    <el-option label="已评分" value="3"></el-option>
                    <el-option label="已审批" value="4"></el-option>
                    <el-option label="已公示" value="5"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item><el-button type="primary" @click="query">搜索</el-button></el-form-item>
        </el-form>


        <el-table :data="tableData" border style="width: 100%">
            <el-table-column
                    label="项目名称"
                    align="center"
                    prop="name">
            </el-table-column>
            <el-table-column label="审批状态" align="center" prop="state">
                <template slot-scope="scope">
                    <span v-if="scope.row.state == '0'">未发布</span>
                    <span v-if="scope.row.state == '1'">申报中</span>
                    <span v-if="scope.row.state == '2'">待评分</span>
                    <span v-if="scope.row.state == '3'">已评分</span>
                    <span v-if="scope.row.state == '4'">已审批</span>
                    <span v-if="scope.row.state == '5'">已公示</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="info(scope.row)">详情</el-button>
                    <el-button
                            v-show="scope.row.state ==='3'"
                            size="mini"
                            type="success"
                            @click="edit(scope.row)">评估</el-button>
                    <el-button
                            v-show="scope.row.state ==='4'"
                            size="mini"
                            type="success"
                            @click="show(scope.row)">发布</el-button>
                    <el-button
                            v-show="scope.row.state ==='4'"
                            size="mini"
                            type="success"
                            @click="port(scope.row)">查看报告</el-button>

                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNo"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="totalRecord" class="text-center mt10">
        </el-pagination>
        <!-- 详情显示弹出框 -->
        <el-dialog title="详情显示" :visible.sync="dialogFormVisible">

            <el-tabs v-model="activeDetail" @tab-click="handleClick">
                <el-tab-pane label="方案信息" name="first">
                    <el-form :model="form1">
                        <el-form-item label="项目名称" :label-width="formLabelWidth">
                            <el-input v-model="form1.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="参评社会组织性质" :label-width="formLabelWidth">
                            <el-input v-model="form1.nature " autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="评估年度" :label-width="formLabelWidth">
                            <el-input v-model="form1.year" autocomplete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="参评条件" :label-width="formLabelWidth">
                            <el-input v-model="form1.condition " autocomplete="off"></el-input>
                        </el-form-item>

                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="申报信息" name="second">
                    <el-table  :data="declarationTableData" border>
                        <el-table-column prop="content" align="center" label="评估内容"></el-table-column>
                        <el-table-column prop="create_time" align="center" label="申报时间"></el-table-column>
                        <el-table-column prop="company_name" align="center" label="申报组织"></el-table-column>
                    </el-table>
                </el-tab-pane>
                <!-- <el-tab-pane label="评分信息" name="third">
                    <el-table  :data="approvalListTableData" border>
                        <el-table-column  align="center" label="评分">
                            <template slot-scope="scope">
                                {{scope.row.level}} - {{scope.row.fraction}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="approval_time" align="center" label="评分时间"></el-table-column>
                        <el-table-column prop="approval_by_name" align="center" label="评分专家"></el-table-column>
                    </el-table>
                </el-tab-pane> -->
                <el-tab-pane label="评估记录" name="four">
                    <el-table  :data="assessmentTableData" border>
                        <el-table-column prop="state" align="center" label="状态">
                            <template slot-scope="scope">
                                <span v-if="scope.row.state == '0'">退回</span>
                                <span v-else>通过</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="reason" align="center" label="退回原因"></el-table-column>
                        <el-table-column prop="create_time" align="center" label="操作时间"></el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible=false">关 闭</el-button>
            </div>
        </el-dialog>

        <!-- 评分弹出框 -->
        <el-dialog title="评价" :visible.sync="dialogFormVisible1"  width="650px">
            <el-table  :data="approvalListTableData" border>
                <el-table-column  align="center" label="评分">
                    <template slot-scope="scope">
                        {{scope.row.level}} - {{scope.row.fraction}}
                    </template>
                </el-table-column>
                <el-table-column prop="approval_time" align="center" label="评分时间"></el-table-column>
                <el-table-column prop="approval_by_name" align="center" label="评分专家"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="success" @click="updateScore(scope.row)">修改分数</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-radio-group v-model="radio" style="margin-left: 125px;margin-bottom: 20px;margin-top: 30px">
                <el-radio style="margin-left: 60px" :label="1" border>通过</el-radio>
                <el-radio style="margin-left: 60px" :label="0" border>驳回</el-radio>
            </el-radio-group>

            <el-form v-show="this.radio =='0'">
                <el-form-item label="驳回原因：">
                    <el-input
                            type="textarea"
                            v-model="desc"
                            autosize
                            placeholder="请输入内容"
                    >
                    </el-input>
                </el-form-item>
            </el-form>

            <div style="width: 160px; margin-left: 445px">
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改分数弹出 -->
        <el-dialog title="评价" :visible.sync="dialogFormVisible2"  width="650px">
            <el-form  class="ml100">
                <el-form-item label="审批分数" :label-width="formLabelWidth">
                    <el-select v-model="approval_fraction">
                        <el-option
                                v-for="item in notemplatelist"
                                :key="item.id"
                                :label="item.level  + '-'+item.fraction "
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div style="width: 160px; margin-left: 445px">
                <el-button type="primary" @click="updateSure(approval_fraction)">确定</el-button>
                <el-button  @click="dialogFormVisible2 = false">关闭</el-button>
            </div>
        </el-dialog>

        <el-dialog title="报告" :visible.sync="reportVisible"  width="650px">
            <div id="printTest">
            <!-- 这里是模板信息 -->
            <el-form :model="countData">
                        <el-form-item label="项目名称:" :label-width="formLabelWidth">
                            {{countData.name}}
                            <!-- <el-input v-model="countData.name" autocomplete="off"></el-input> -->
                        </el-form-item>
                        <el-form-item label="参评社会组织性质:" :label-width="formLabelWidth">
                            {{countData.nature}}
                            <!-- <el-input v-model="countData.nature " autocomplete="off"></el-input> -->
                        </el-form-item>
                        <el-form-item label="评估年度:" :label-width="formLabelWidth">
                            {{countData.year}}
                            <!-- <el-input v-model="countData.year" autocomplete="off"></el-input> -->
                        </el-form-item>
                        <el-form-item label="参评条件:" :label-width="formLabelWidth">
                            {{countData.condition}}
                            <!-- <el-input v-model="countData.condition" autocomplete="off"></el-input> -->
                        </el-form-item>
                        <el-form-item label="评估内容:" :label-width="formLabelWidth">
                            {{countData.content}}
                            <!-- <el-input v-model="countData.content" autocomplete="off"></el-input> -->
                        </el-form-item>
                        <el-form-item label="申报组织:" :label-width="formLabelWidth">
                            {{countData.company_name}}
                            <!-- <el-input v-model="countData.company_name" autocomplete="off"></el-input> -->
                        </el-form-item>
                        <el-form-item label="申报时间:" :label-width="formLabelWidth">
                            {{countData.create_time}}
                            <!-- <el-input v-model="countData.create_time" autocomplete="off"></el-input> -->
                        </el-form-item>
                        <el-form-item label="评估状态:" :label-width="formLabelWidth">
                            <span v-if="countData.backstate == '0'">退回</span>
                            <span v-if="countData.backstate == '1'">通过</span>
                            <!-- <el-input v-model="countData.state " autocomplete="off"></el-input> -->
                        </el-form-item>
                        <el-form-item v-show="countData.backstate == '0'" label="退回原因:" :label-width="formLabelWidth">
                            {{countData.reason}}
                            <!-- <el-input v-model="countData.reason " autocomplete="off"></el-input> -->
                        </el-form-item>
                    </el-form>
            </div>
            <div style="margin-bottom: 30px;margin-right: 20px;float: right;">
                <el-button size="mini" type="primary" v-print="'#printTest'">打印报告</el-button>
                <!-- <button size="large" type="primary" v-print="'#printTest'">打印</button> -->
            </div>
        </el-dialog>
    </div>
</template>

<script>


    export default {
        data () {
            return {
                reportVisible:false,
                countData:{},
                complainId: 0,
                detail: {},
                dialogFormVisible2:false,//修改分数弹出
                tableData:[],//初始化数据表格
                dialogFormVisible:false,//详情弹出框
                radio:'',//单选、是否通过
                desc:'',//驳回原因
                dialogFormVisible1:false,//评分弹出
                activeDetail:'first',//详情tab页绑定
                form1:{},//详情内容
                formLabelWidth: '240px',
                declarationTableData:[],
                assessmentTableData:[],
                approvalListTableData:[],
                notemplatelist:[],//分数下拉列表
                approval_fraction:'',//绑定修改分数
                upid:'',
                rid :'',
                searchForm:{
                    name:'',
                    state:''
                },

                pageNo: 1,
                pageSize: 10,
                totalRecord: 0,
                totalPage: 0,
            }
        },


        methods : {
            async init () {
                let res = await this.$http('adoptpprovalList',{
                    pageSize : this.pageSize,
                    pageNo : this.pageNo,
                });
                console.log(res)
                this.tableData = res.results
                this.totalPage = res.totalPage;
                this.totalRecord = res.totalRecord;
            },
            //分页
            async handleSizeChange(val) {
                this.pageSize = val;
                this.init();
            },
            async handleCurrentChange(val) {
                this.pageNo = val;
                this.init();
            },
            async handleClick(tab, event) {
                console.log(tab, event);
            },

            async edit(param){//点击评分
                console.log('param',param)
                this.rid = param.id
                this.dialogFormVisible1 = true
                this.approvalListTableData = await this.$http('approvalList',{
                    programme_id:param.id
                })
                console.log('评分记录',this.approvalListTableData)
                this.notemplatelist = await this.$http('gettemplateList', {
                    template_code:param.template_code
                })
                console.log('zhibiao', this.notemplatelist )
            },
            async updateScore(param){//点击修改分数
                console.log('修改分数',param)
                this.upid = param.id
                this.dialogFormVisible2 = true

            },
            async updateSure(param){//修改分数确定
                console.log('修改分数确定',param)
                let res = await this.$http('updatefraction', {
                    id:this.upid,
                    approval_fraction:this.approval_fraction,
                })

                this.dialogFormVisible2 = false
                this.approvalListTableData = await this.$http('approvalList',{
                    programme_id:this.rid
                })
                 this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
            },
            async save(){//评估确定
                let res = await this.$http('updateApproval', {
                    id:this.rid,
                    state :this.radio,
                    reason : this.desc
                })
                console.log('state',this.state)
                this.dialogFormVisible1 = false
                this.init()
            },

            async show(param){
                let res = await this.$http('updatestate', {
                    id:param.id,
                    state :'5',
                })
                console.log('rrrr',res)
                if (res.count === 1) {
                    this.$message({
                        message: '发布成功',
                        type: 'success'
                    });
                }
                this.init();
            },
            async port(param){
                this.reportVisible = true
                this.declarationTableData = await this.$http('assessmentdeclareList',{
                        programme_id:param.id
                    });
                    this.assessmentTableData = await this.$http('assessmentbackhistoryList',{
                        programme_id:param.id
                    })
                console.log('rrrr',param)
                this.countData = Object.assign(param,this.declarationTableData[0] , this.assessmentTableData[0]);
                console.log('和',this.countData)
            },
            async info(param){//点击详情
                console.log('点击详情',param)
                this.activeDetail = 'first'
                if(param.state !=='0'){
                    this.dialogFormVisible = true
                    this.form1 = param

                    this.declarationTableData = await this.$http('assessmentdeclareList',{
                        programme_id:param.id
                    });
                    console.log('shenbao',this.declarationTableData)
                    this.assessmentTableData = await this.$http('assessmentbackhistoryList',{
                        programme_id:param.id
                    })
                    console.log('评估记录',this.assessmentTableData)
                }
            },
            async query(){//搜索
                let res = await this.$http('adoptpprovalList', {
                    name : this.searchForm.name,
                    state :this.searchForm.state
                });
                console.log(res)
                /* for(var i = 0; i < res.results.length; i ++){
                     if(res.results[i].zzid !== undefined){
                         res.results[i].zzid = res.results[i].zzid.split(',')
                     }
                     if(res.results[i].zjid !== undefined ){
                         res.results[i].zjid = res.results[i].zjid.split(',')
                     }
                 }*/
                this.tableData = res.results
                this.totalPage = res.totalPage;
                this.totalRecord = res.totalRecord;
                /*this.searchForm.name = ''
                this.searchForm.state = ''*/
            },
          /*  loadDetail () {
              this.$http.get(this.url+'?id='+this.complainId).then(res => {
                this.detail = res.result
              })
            },*/
            print () {
              window.print() //调用系统打印机
            }
        },

        mounted () {
            this.complainId = this.$route.query.id //拿到跳转路由时携带的id
            /*this.loadDetail() //请求接口 拿到信息*/
            this.init();
        },

    }
</script>

<style scoped>

</style>
